<template>
  <div id="app">
    <!-- <RouterView /> -->
    <div :class="tabbarShow ? 'content' : 'common'">
      <suspense>
        <router-view v-slot="{ Component }">
          <keep-alive>
            <component :is="Component" :key="route.name" v-if="route.meta.keepAlive" />
          </keep-alive>
          <component :is="Component" :key="route.name" v-if="!route.meta.keepAlive" />
        </router-view>
      </suspense>
    </div>
    <van-tabbar v-show="tabbarShow" v-model="active">
      <van-tabbar-item replace :to="item.hash" v-for="item in icons">
        <template #icon="props">
          <img :src="props.active ? item.active : item.deactive" />
        </template>
      </van-tabbar-item>
    </van-tabbar>
    <div id="wholeCover">
      <van-overlay :show="true">
        <van-loading color="#FFF" size="36px" vertical @click.stop>加载中...</van-loading>
      </van-overlay>
    </div>
  </div>
</template>
<script lang="ts">
// @ts-nocheck
import { ref, watch } from "vue";
import { useRoute } from "vue-router";
import { requireImg } from "@/assets/imgUrl";

//在setup中
export default {
  name: "App",
  setup() {
    const active = ref(0);
    const tabbarShow = ref(false);
    const isLoading = true
    const route = useRoute();
    
    const icons = [{
      active: requireImg('home_f.png'),
      deactive: requireImg('home.png'),
      hash: '/'
    },{
      active: requireImg('money_f.png'),
      deactive: requireImg('money.png'),
      hash: '/money'
    },{
      active: requireImg('proxy_f.png'),
      deactive: requireImg('proxy.png'),
      hash: '/proxy'
    },{
      active: requireImg('mine_f.png'),
      deactive: requireImg('mine.png'),
      hash: '/mine'
    }];

    return {
      active,
      tabbarShow,
      isLoading,
      route,
      icons
    };
  },
  mounted() {
  },
  watch: {
    $route: {
      handler(newRoute: any) {
        const { path } = newRoute;
        const index = ["/","/money", "/proxy", "/mine"].indexOf(
          path
        );
        if (~index) {
          this.active = index;
          this.tabbarShow = true;
        } else {
          this.tabbarShow = false;
        }
      },
      // 深度观察监听
      deep: true,
    },
  },
};
</script>
<style scoped lang="scss">
#app {
  height: 100vh;
  overflow-y: scroll;
  background-color: #F6F6F6;

  #wholeCover {
    position: absolute;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.1);
    z-index: 999;
    display: none;
  }

  .content {
    height: calc(100vh - 0.8rem);
    overflow-y: auto;
  }

  .common {
    height: 100vh;
    overflow-y: auto;
  }

  :deep(.van-overlay) {
    background: rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  :deep(.van-tabbar-item__icon img) {
    height: 40px;
  }
}
</style>